<template>
  <div class="goods-list">
    
    <!--<router-link-->
        <!--class="goods-item"-->
        <!--v-for="item in goodslist"-->
        <!--:key="item.goods_id"-->
        <!--:to=" '/home/goodsinfo' + item.id "-->
        <!--tag="div"-->
    <!--&gt;-->

      <!--<div class="goods-pic">-->
        <!--<img :src="item.img" alt="">-->
    <!--</div>-->
      <!--<div class="goods-title">-->
        <!--<p>{{item.goods_name}}</p>-->
      <!--</div>-->

      <!--<div class="goodsinfo">-->
        <!--<p class="price">-->
          <!--<span class="now">￥899</span>-->
          <!--<span class="old">￥{{item.goods_price}}</span>-->
        <!--</p>-->
        <!--<p class="sell">-->
          <!--<span>热卖中</span>-->
          <!--<span>剩60件</span>-->
        <!--</p>-->
      <!--</div>-->
    <!--</router-link>-->

    <!-- 在网页中，有两种跳转方式： -->
    <!-- 方式1： 使用 a 标签 的形式叫做 标签跳转  -->
    <!-- 方式2： 使用 window.location.href 的形式，叫做 编程式导航 -->

    <div
        class="goods-item"
        v-for="item in goodslist"
        :key="item.goods_id"
        @click="goDetail(item.goods_id)"
    >

      <div class="goods-pic">
        <img :src="item.img" alt="">
      </div>
      <div class="goods-title">
        <p>{{item.goods_name}}</p>
      </div>

      <div class="goodsinfo">
        <p class="price">
          <span class="now">￥899</span>
          <span class="old">￥{{item.goods_price}}</span>
        </p>
        <p class="sell">
          <span>热卖中</span>
          <span>剩60件</span>
        </p>
      </div>
    </div>
  </div>

</template>

<script>
    export default {
        data(){
            return {
                pageindex: 1, // 分页的页数
                goodslist: [

            {goods_id: "22", goods_name: "奥迪A6L", img: "http://shwilling.ufile.ucloud.com.cn/uploads/ueditor/image/20180728/wjt_1532775568.png", goods_price: "400000000"},
            {goods_id: "21", goods_name: "飞利浦 电动牙刷", img: "http://shwilling.ufile.ucloud.com.cn/uploads/ueditor/image/20180728/wjt_1532773641.jpg", goods_price: "439000"},
            {goods_id: "20", goods_name: "SK-II 神仙水", img: "http://shwilling.ufile.ucloud.com.cn/uploads/ueditor/image/20180728/wjt_1532773099.jpg", goods_price: "1450000"},
            {goods_id: "19", goods_name: "科沃斯 扫地机器人", img: "http://shwilling.ufile.ucloud.com.cn/uploads/ueditor/image/20180728/wjt_1532772323.jpg", goods_price: "2599000"},
            {goods_id: "18", goods_name: "飞利浦剃须刀", img: "http://shwilling.ufile.ucloud.com.cn/uploads/ueditor/image/20180704/zhangjh_1530688321.jpg", goods_price: "329000"},
            {goods_id: "17", goods_name: "500元京东卡", img: "http://shwilling.ufile.ucloud.com.cn/uploads/ueditor/image/20180628/1530180715432716.jpg", goods_price: "500000"},
            {goods_id: "16", goods_name: "300元京东卡", img: "http://shwilling.ufile.ucloud.com.cn/uploads/ueditor/image/20180628/1530180497537763.jpg", goods_price: "300000"},
            {goods_id: "15", goods_name: "100元京东卡", img: "http://shwilling.ufile.ucloud.com.cn/uploads/ueditor/image/20180628/1530180332371049.jpg", goods_price: "100000"},
            {goods_id: "14", goods_name: "Dior 520", img: "http://shwilling.ufile.ucloud.com.cn/uploads/ueditor/image/20180628/1530179842798013.jpg", goods_price: "320000"},
            {goods_id: "13", goods_name: "SONY耳机", img: "http://shwilling.ufile.ucloud.com.cn/uploads/ueditor/image/20180628/1530179588761649.jpg", goods_price: "800000"},
            {goods_id: "12", goods_name: "iphone X 64G", img: "http://shwilling.ufile.ucloud.com.cn/uploads/ueditor/image/20180628/1530178138855614.jpg", goods_price: "8316000"},
            {goods_id: "10", goods_name: "中国电信500M", img: "http://shwilling.ufile.ucloud.com.cn/uploads/ueditor/image/20180604/zhuren_1528081399.png", goods_price: "28000"},
            {goods_id: "9", goods_name: "中国电信100M", img: "http://shwilling.ufile.ucloud.com.cn/uploads/ueditor/image/20180604/zhuren_1528081273.png", goods_price: "8500"},
            {goods_id: "8", goods_name: "中国联通1G", img: "http://shwilling.ufile.ucloud.com.cn/uploads/ueditor/image/20180604/zhuren_1528081240.png", goods_price: "48000"},
            {goods_id: "7", goods_name: "中国联通500M", img: "http://shwilling.ufile.ucloud.com.cn/uploads/ueditor/image/20180604/zhuren_1528081414.png", goods_price: "29000"},
            {goods_id: "6", goods_name: "中国联通100M", img: "http://shwilling.ufile.ucloud.com.cn/uploads/ueditor/image/20180604/zhuren_1528081322.png", goods_price: "9800"},
            {goods_id: "5", goods_name: "中国移动1G", img: "http://shwilling.ufile.ucloud.com.cn/uploads/ueditor/image/20180604/zhuren_1528081258.png", goods_price: "29900"},
            {goods_id: "4", goods_name: "中国移动500M", img: "http://shwilling.ufile.ucloud.com.cn/uploads/ueditor/image/20180604/zhuren_1528081435.png", goods_price: "22000"},
            {goods_id: "3", goods_name: "中国移动100M", img: "http://shwilling.ufile.ucloud.com.cn/uploads/ueditor/image/20180604/zhuren_1528081376.png", goods_price: "8000"},

        ] // 存放商品列表的数组
            }
        },
        created(){

            // this.getGoodsList();
        },
        methods:{
            getGoodsList() {
                // 获取商品列表
                this.$http
                    .get("api/getgoods?pageindex=" + this.pageindex)
                    .then(result => {
                        if (result.body.status === 0) {
                            // this.goodslist = result.body.message;
                            this.goodslist = this.goodslist.concat(result.body.message);
                        }
                    });
            },
            getMore() {
                this.pageindex++;
                this.getGoodsList();
            },
            goDetail(id){
                // console.log(this);
                // 使用JS的形式进行路由导航
                // 注意： 一定要区分 this.$route 和 this.$router 这两个对象，
                // 其中： this.$route 是路由【参数对象】，所有路由中的参数， params, query 都属于它
                // 其中： this.$router 是一个路由【导航对象】，用它 可以方便的 使用 JS 代码，实现路由的 前进、后退、 跳转到新的 URL 地址

                // 1. 最简单的
                // this.$router.push("/home/goodsinfo/" + id);
                // 2. 传递对象
                // this.$router.push({ path: "/home/goodsinfo/" + id });
                // 3. 传递命名的路由
                this.$router.push({ name: "goodsinfo", params: { id } });

            }
        },

    }
</script>

<style scoped lang="less">

  .goods-list{
    padding: 0 7px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;

    .goods-item{
      margin-top: 7px;
      width: 49%;
      display: flex;
      padding: 2px;
      background-color: #ffffff;
      flex-direction: column;
      box-shadow: 0 0 8px #ccc;
      border-radius: 4px;
      border: 1px solid #ccc;

      img{
        width: 100%;
      }

      .goods-title p {
        font-size: 15px;
        color: #333333;
      }

      .goodsinfo{
        background-color: #eee;
        p{
          margin: 0;
          padding: 5px;
        }
        .price{
          .now{
            color: red;
            font-weight: bold;
            font-size: 16px;
          }
          .old{
            text-decoration: line-through;
            font-size: 12px;
            margin-left: 10px;
          }
        }
        .sell{
          display: flex;
          justify-content: space-between;
          font-size: 13px;
        }
      }


    }
  }

</style>